<template>
	<view :class="['content',{marinTop:showTopMsg}]">
		<img class="full" src="../static/index_01.jpg">
		<form @submit="formSubmit" ref="mainForm">
			<view class="uni-form-item uni-column">
				<view class="title">您的姓名：</view>
				<input class="uni-input" name="trueName" style="width:430rpx" />
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">您的性别：</view>
				<radio-group name="sex">
					<label style="margin-right: 30rpx;">
						<radio value="男" checked="true" /><text>男</text>
					</label>
					<label>
						<radio value="女" /><text>女</text>
					</label>
				</radio-group>
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">您的生日：</view>
				<picker style="width:430rpx" name="birthDay" mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="uni-input">{{date}}</view>
				</picker>
			</view>
			<view class="uni-form-item uni-column last">
				<view class="title">出生时间：</view>
				<picker style="width:430rpx" name="birthTime" mode="time" :value="time" start="00:00" end="23:59" @change="bindTimeChange">
					<view class="uni-input">{{time}}</view>
				</picker>
			</view>
			<view class="uni-btn-v">
				<button form-type="submit"></button>
			</view>
		</form>
		<!-- <view>
			同意 用户隐私协议
		</view> -->
		<img class="full" src="../static/index_02.jpg">
		<img class="full" src="../static/index_04.jpg">
		<img class="full" src="../static/index_05.jpg">
		<img class="full" src="../static/index_06.jpg">
		<img class="full" src="../static/index_07.jpg">
		<table>
			<tr>
				<td><img class="full" src="../static/index_08.jpg"></td>
				<td><img class="full" src="../static/index_09.jpg" @tap="btnToMain"></td>
				<td><img class="full" src="../static/index_10.jpg"></td>
			</tr>
		</table>
		<img class="full" src="../static/index_11.jpg">
		<img class="full" src="../static/index_12.jpg">
		<img class="full" src="../static/index_13.jpg">
		<img class="full" src="../static/index_14.jpg">
		<img class="full" src="../static/index_15.jpg">
		<table>
			<tr>
				<td><img class="full" src="../static/index_16.jpg"></td>
				<td><img class="full" src="../static/index_17.jpg" @tap="btnToMain"></td>
				<td><img class="full" src="../static/index_18.jpg"></td>
			</tr>
		</table>
		<img class="full" src="../static/index_19.jpg">
		<img class="full" src="../static/index_20.jpg">
		<img class="full" src="../static/index_21.jpg">
		<img class="full" src="../static/index_22.jpg" style="width:64%;height:auto;" @tap="btnToMain">
		<img class="full" src="../static/index_23.jpg">
		<img class="full" src="../static/index_24.jpg">
		<table>
			<tr>
				<td><img class="full" src="../static/index_25.jpg"></td>
				<td><img class="full" src="../static/index_26.jpg" @tap="btnToMain"></td>
				<td><img class="full" src="../static/index_27.jpg"></td>
			</tr>
		</table>
		<img class="full" src="../static/index_28.jpg">
		<!-- 顶栏提示组件 -->
		<uni-popup ref="topmsg" type="message" @change="topmsgChange">
		    <uni-popup-message type="warn" :message="topmsgCont" :duration="0" @trigger="topmsgClick"></uni-popup-message>
		</uni-popup>
		<!-- 错误提示组件 -->
		<uni-popup ref="popuperr" type="dialog">
		    <uni-popup-dialog type="error" message="错误提示" 
				:duration="2000" 
				:content="popuperrCont"
				:showCancelBtn="false"  @confirm="popuperrConfirm">
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				date: currentDate,
				time: '00:00',
				popuperrCont:"未知错误",
				topmsgCont:"",
				showTopMsg:false
			}
		},
		components: {
			uniPopup,
			uniPopupMessage,
			uniPopupDialog,
		},
		onLoad() {
		},
		mounted(){
			this.topmsgCont = "检测到您之前有测算记录，请点击查看 >>"
			this.$refs.topmsg.open()
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			formSubmit: function(e) {
				console.log(e.detail.value)
				
				var formdata = e.detail.value
				if (formdata.trueName.trim() == "" || formdata.trueName.trim().length < 2) {
					this.popuperrCont = "姓名为必填项，且至少两个字"
					this.$refs.popuperr.open()
					return
				}
				
				uni.redirectTo({
				    url: "result"
				});
			},
			bindDateChange: function(e) {
				this.date = e.target.value
			},
			bindTimeChange: function(e) {
				this.time = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 100;
				} else if (type === 'end') {
					year = year;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			popuperrConfirm(done){
				done()
			},
			topmsgClick(){
				uni.navigateTo({
				    url: 'orderlist'
				    // url: 'page/orderlist?id=1&name=uniapp'
				});
			},
			topmsgChange(e){
				this.showTopMsg = e.show
			},
			btnToMain(){
				window.scrollTo(0,this.$refs.mainForm.$el.offsetTop-100)
			}
		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		max-width: 600px;
		margin: 0 auto;
		transition: .4s all;
	}
	
	.content.marinTop{
		padding-top: 30px;
	}

	form {
		width: 680rpx;
		font-size: 30rpx;
	}

	.uni-form-item {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		height: 90rpx;
		border: 1px solid #bfa286;
		border-top: 0;
		background: #fffefa;
		padding: 0 35rpx;
		color: #946142;
	}

	.uni-form-item .title {
		font-weight: 700;
		margin-right: 20rpx;
	}

	.uni-form-item:first-child {
		border-top: 1px solid #bfa286;
	}

	.uni-form-item:not(.last) {
		border-bottom: 1px solid #e3dad5;
	}

	.uni-btn-v {
		margin-top: 40rpx;
	}

	.uni-btn-v button {
		background-image: url(../static/index_03.jpg);
		background-size: 100% auto;
		width: 440rpx;
		height: 85rpx;
	}

	.uni-btn-v button::after {
		border: none;
	}

	img.full {
		width: 100%;
		height: auto;
	}

	table {
		border-collapse: collapse;
		margin-bottom: -6px;
	}

	table td {
		border: 0;
		padding: 0;
		margin: 0;
	}
</style>
